<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网络设备状态</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        .header-container {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 30px;
            /* 间隔 */
        }

        .clock {
            /* 时间样式 */
            font-size: 1.8em;
            /* 字体大小，根据需要调整 */
            font-weight: bold;
            /* 字体加粗 */
        }

        .cards-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10px;
        }

        .card {
            width: calc(20% - 10px);
            /* Adjust width for 5 cards per row */
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            height: 80px;
            /* overflow: hidden;
            防止内容溢出 */
            /* Fixed height for card */
        }

        .card-header {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .status-indicator {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
            flex-shrink: 0;
            /* 防止缩小 */
        }

        .status-text {
            flex-grow: 1;
            text-align: right;
        }

        .online .status-indicator {
            background-color: green;
        }

        .offline .status-indicator {
            background-color: red;
        }

        .card.online {
            border: 1px solid green;
        }

        .card.offline {
            border: 1px solid red;
            background: #fcdddd;
            /* 离线卡的浅红色背景 */
        }

        .device-info {
            font-size: 0.9em;
        }

        .search-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            /* 或其他您需要的边距 */
        }

        .search-container input[type="text"],
        .search-container select {
            padding: 5px;
            margin-right: 5px;
            /* 为元素间提供空间 */
            border: 1px solid #ccc;
            /* 边框颜色 */
            border-radius: 4px;
            /* 圆角 */
            width: auto;
            /* 自动宽度，可根据内容调整 */
        }

        .search-container button {
            padding: 5px 10px;
            background-color: #4CAF50;
            /* 绿色 */
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 增加input和select的宽度 */
        .search-container input[type="text"] {
            flex-grow: 3;
            /* 让搜索框更宽 */
            width: 350px;
        }

        .search-container select {
            flex-grow: 1;
            /* 让下拉框适当宽度 */
        }

        /* 左键下拉菜单 */
        .context-menu {
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            z-index: 1000;
        }

        .context-menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .context-menu ul li a {
            text-decoration: none;
            color: black;
            padding: 5px;
            display: block;
        }

        .context-menu ul li a:hover {
            background-color: #f0f0f0;
        }

        /* 左键详细信息抽屉样式 */
        /* 抽屉样式 */
        .details-drawer-net {
            position: fixed;
            top: 0;
            right: -400px;
            /* 初始状态在屏幕外 */
            width: 400px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.5);
            transition: right 0.3s;
            overflow-y: auto;
            z-index: 2000;
        }

        .drawer-content-net {
            padding: 20px;
        }

        /* 添加关闭按钮样式 */
        .close-drawer {
            position: absolute;
            top: 20px;
            right: 20px;
            cursor: pointer;
            font-size: 24px;
            /* 增加字体大小 */
            color: #333;
            /* 按钮的颜色 */
            background-color: #fff;
            /* 背景颜色 */
            border-radius: 50%;
            /* 圆形按钮 */
            width: 40px;
            /* 宽度 */
            height: 40px;
            /* 高度 */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* 添加阴影效果 */
            transition: background-color 0.3s, color 0.3s;
            /* 过渡效果 */
        }

        .close-drawer:hover {
            color: #fff;
            /* 悬浮时颜色变化 */
            background-color: #f44336;
            /* 悬浮时背景颜色变化 */
        }

        /* 现有样式保持不变 */

        /* 响应式布局样式 */
        @media (max-width: 1200px) {
            .card {
                width: calc(25% - 10px);
                /* 4张卡片每行 */
            }
        }

        @media (max-width: 992px) {
            .card {
                width: calc(33.333% - 10px);
                /* 3张卡片每行 */
            }
        }

        @media (max-width: 768px) {
            .card {
                width: calc(50% - 10px);
                /* 2张卡片每行 */
            }
        }

        @media (max-width: 576px) {
            .card {
                width: calc(100% - 20px);
                /* 1张卡片每行 */
            }
        }

        /* 适应屏幕的其他元素 */
        @media (max-width: 576px) {
            .search-container input[type="text"] {
                width: 100%;
                /* 搜索框全宽 */
            }

            .search-container select,
            .search-container button {
                width: 100%;
                margin-top: 10px;
                /* 为下拉菜单和按钮添加上边距 */
            }
        }
    </style>
</head>

<body>
    <div class="header-container">
        <h1>网络设备状态</h1>
        <div class="clock" id="clock"></div>
    </div>
    <div class="search-container">
        <div>
            <label for="search-input"></label><input type="text" id="search-input"
                placeholder="搜索IP地址、状态、机架位置、主机名..." />
            <label for="status-select"></label><select id="status-select">
                <option value="">选择状态...</option>
                <option value="在线">在线</option>
                <option value="不在线或无法访问">不在线或无法访问</option>
            </select>
            <button id="search-button">搜索</button>
        </div>
    </div>

    <div class="cards-container" id="device-status-container">
        <!-- 卡片将通过 JavaScript 插入到此处 -->
    </div>
    <!-- 左键下拉菜单 -->
    <div id="context-menu" class="context-menu" style="display:none;">
        <ul>
            <li><a href="#" id="connect">连接</a></li>
            <li><a href="#" id="disconnect">断开</a></li>
            <li><a href="#" id="details">详细信息</a></li>
        </ul>
    </div>
    <!-- 左键下拉菜单详细信息抽屉 -->
    <!-- 抽屉部分 -->
    <div id="details-drawer-net" class="details-drawer-net" style="display:none;">
        <div id="drawer-content-net" class="drawer-content-net">
            <!-- 设备的详细信息将在这里显示 -->
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <script>
        let autoRefreshInterval;
        // 搜索按钮的事件侦听器
        document.getElementById('search-button').addEventListener('click', function () {
            const searchText = document.getElementById('search-input').value.toLowerCase();
            const statusFilter = document.getElementById('status-select').value;

            clearInterval(autoRefreshInterval); // 停止自动刷新
            autoRefreshInterval = null;

            updateStatus(searchText, statusFilter); // 仅显示符合搜索条件的结果
        });

        $(document).ready(function () {
            autoRefreshInterval = setInterval(updateStatus, 10 * 1000); // 每 10 秒自动刷新
            updateStatus(); // 初次调用以填充卡片
        });

        // 后端获取数据并填充卡片
        // function updateStatus(searchText = '', statusFilter = '') {
        //     $.ajax({
        //         url: '/it_purchase_list/get_device_status/', // 将此 URL 更改为 JSON 数据的来源
        //         method: 'GET',
        //         dataType: 'json',
        //         success: function (devices) {
        //             const container = document.getElementById('device-status-container');
        //             container.innerHTML = ''; // 清除容器中的当前内容

        //             let filteredDevices;

        //             // 检查是否有搜索条件
        //             if (searchText || statusFilter) {
        //                 // 应用搜索和状态过滤
        //                 filteredDevices = devices.filter(device => {
        //                     return (device.name.toLowerCase().includes(searchText) ||
        //                         device.ip_address.toLowerCase().includes(searchText) ||
        //                         device.rack_position.toLowerCase().includes(searchText) ||
        //                         device.status.toLowerCase().includes(searchText)) &&
        //                         (device.status === statusFilter || statusFilter === '');
        //                 });
        //             } else {
        //                 // 无搜索条件，显示所有设备
        //                 filteredDevices = devices;
        //             }

        //             // 分离在线和不在线的设备
        //             const offlineDevices = filteredDevices.filter(device => device.status === '不在线或无法访问');
        //             const onlineDevices = filteredDevices.filter(device => device.status === '在线');

        //             // 首先添加不在线的设备
        //             offlineDevices.forEach(function (device) {
        //                 createCard(device, container);
        //             });

        //             // 然后添加在线的设备
        //             onlineDevices.forEach(function (device) {
        //                 createCard(device, container);
        //             });
        //         }
        //     });
        //     // 检查搜索条件是否为空，以决定是否重新启动自动刷新
        //     if (searchText === '' && statusFilter === '') {
        //         if (!autoRefreshInterval) {
        //             autoRefreshInterval = setInterval(updateStatus, 10 * 1000);
        //         }
        //     } else {
        //         clearInterval(autoRefreshInterval); // 停止自动刷新
        //         autoRefreshInterval = null;
        //     }
        // }

        // 更新状态的函数使用axios
        function updateStatus(searchText = '', statusFilter = '') {
            // 使用 axios 发送 GET 请求
            axios.get('/it_purchase_list/get_device_status/') // 将此 URL 更改为 JSON 数据的来源
                .then(function (response) {
                    const devices = response.data; // 获取响应数据
                    const container = document.getElementById('device-status-container');
                    container.innerHTML = ''; // 清除容器中的当前内容

                    let filteredDevices;

                    // 检查是否有搜索条件
                    if (searchText || statusFilter) {
                        // 应用搜索和状态过滤
                        filteredDevices = devices.filter(device => {
                            return (device.name.toLowerCase().includes(searchText.toLowerCase()) ||
                                device.ip_address.toLowerCase().includes(searchText.toLowerCase()) ||
                                device.rack_position.toLowerCase().includes(searchText.toLowerCase()) ||
                                device.status.toLowerCase().includes(searchText.toLowerCase())) &&
                                (device.status === statusFilter || statusFilter === '');
                        });
                    } else {
                        // 无搜索条件，显示所有设备
                        filteredDevices = devices;
                    }

                    // 分离在线和不在线的设备
                    const offlineDevices = filteredDevices.filter(device => device.status === '不在线或无法访问');
                    const onlineDevices = filteredDevices.filter(device => device.status === '在线');

                    // 首先添加不在线的设备
                    offlineDevices.forEach(function (device) {
                        createCard(device, container);
                    });

                    // 然后添加在线的设备
                    onlineDevices.forEach(function (device) {
                        createCard(device, container);
                    });
                })
                .catch(function (error) {
                    console.error('获取数据时出错： ', error);
                });

            // 检查搜索条件是否为空，以决定是否重新启动自动刷新
            if (searchText === '' && statusFilter === '') {
                if (!autoRefreshInterval) {
                    autoRefreshInterval = setInterval(() => updateStatus(), 10 * 1000);
                }
            } else {
                if (autoRefreshInterval) {
                    clearInterval(autoRefreshInterval); // 停止自动刷新
                    autoRefreshInterval = null;
                }
            }
        }


        // 创建设备卡片的函数
        function createCard(device, container) {
            const card = document.createElement('div');
            card.className = 'card ' + (device.status === '在线' ? 'online' : 'offline');
            card.innerHTML =
                '<div class="card-header">' +
                '<span class="status-indicator"></span>' +
                '<strong>' + device.name + '</strong>' +
                '</div>' +
                '<div class="device-info">IP 地址: ' + device.ip_address + '</div>' +
                '<div class="device-info">机架位置: ' + device.rack_position + '</div>' +
                '<div class="status-text">' + device.status + '</div>';
            container.appendChild(card);

            // 添加点击事件监听器
            card.addEventListener('click', function (event) {
                event.preventDefault();
                showContextMenu(event.clientX, event.clientY, device);
            });

            container.appendChild(card);
        }

        // 左键下拉菜单函数
        function showContextMenu(x, y, device) {
            const menu = document.getElementById('context-menu');
            menu.style.display = 'block';
            menu.style.left = `${x}px`;
            menu.style.top = `${y + window.scrollY}px`; // 加上垂直滚动偏移量

            // 为菜单项添加事件处理（可根据需要添加逻辑）
            document.getElementById('connect').onclick = function (event) {
                event.preventDefault();     // 导航到该锚点（由于 href="#" 设置）, 防止页面在点击时滚动到顶部
                const ip = device.ip_address; // 获取设备 IP 地址
                window.open(`/it_purchase_list/webssh?ip=${ip}`, '_blank')
            };
            document.getElementById('disconnect').onclick = function () {
                event.preventDefault();     // 导航到该锚点（由于 href="#" 设置）, 防止页面在点击时滚动到顶部
                console.log('断开设备', device);
            };
            document.getElementById('details').onclick = function () {
                event.preventDefault();     // 导航到该锚点（由于 href="#" 设置）, 防止页面在点击时滚动到顶部
                const drawer = document.getElementById('details-drawer-net');
                const drawerContent = document.getElementById('drawer-content-net');
                drawerContent.innerHTML = '<span class="close-drawer">&times;</span>' +
                    '<h2>设备详细信息</h2>' +
                    '<p><strong>主机名：</strong>' + device.name + '</p>' +
                    '<p><strong>IP 地址：</strong>' + device.ip_address + '</p>' +
                    '<p><strong>机架位置：</strong>' + device.rack_position + '</p>' +
                    '<p><strong>状态：</strong>' + device.status + '</p>' +
                    '<p><strong>品牌：</strong>' + device.brand + '</p>' +
                    '<p><strong>类型：</strong>' + device.type + '</p>' +
                    '<p><strong>型号：</strong>' + device.model + '</p>' +
                    '<p><strong>序列号：</strong>' + device.serial_number + '</p>' +
                    '<p><strong>购买日期：</strong>' + device.purchase_date + '</p>' +
                    '<p><strong>位置：</strong>' + device.location + '</p>' +
                    '<p><strong>维保状态：</strong>' + device.maintenance_status + '</p>' +
                    '<p><strong>服务对象：</strong>' + device.service_object + '</p>' +
                    '<p><strong>采购价格：</strong>' + device.purchase_price + '</p>' +
                    '<p><strong>供应商：</strong>' + device.supplier + '</p>' +
                    '<p><strong>用户名：</strong>' + device.username + '</p>' +
                    '<p><strong>密码：</strong>' + device.password + '</p>' +
                    '<p><strong>链接：</strong>' + (device.web_link ? '<a href="' + device.web_link + '" target="_blank">访问链接</a>' : 'N/A') + '</p>' +
                    '<p><strong>备注：</strong>' + device.remarks + '</p>';
                drawer.style.display = 'block';
                drawer.style.right = '0';

                // 关闭按钮事件
                document.querySelector('.close-drawer').onclick = function () {
                    drawer.style.right = '-400px';
                };
            };
        }

        // 隐藏上下文菜单：当用户点击其他位置时，上下文菜单应该隐藏
        document.addEventListener('click', function (event) {
            const menu = document.getElementById('context-menu');

            // 检查点击是否发生在卡片之外，如果是，则隐藏上下文菜单
            if (!event.target.closest('.card')) {
                menu.style.display = 'none';
            }

        });

        // 更新时间
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('zh-CN', { hour12: false });
            document.getElementById('clock').textContent = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${timeString}`;
        }

        // 每秒钟更新一次时间
        setInterval(updateTime, 1000);
        updateTime(); // 当页面加载时立即调用

    </script>
</body>

</html>